<template>
	<view>

		<!-- <view class="segmented">
			<uni-segmented-control disabled="false" :current="current" :values="items" @clickItem="onClickItem" style-type="text"
			 active-color="#27a7e1">
			</uni-segmented-control>
		</view> -->

		<view class="content">

			<!-- 订单start -->
			<view v-show="current === 0">

				<!-- 订单信息start -->
				<view class="orderDetail">
					<view>
						<image class="image" mode="aspectFill" src="../../static/img/homepage/s4.jpg"></image>
					</view>
					<view class="detail">
						<view>
							<text>夹克厨房</text>
							<text class="paymentStatus">
								<text>未付款</text>
								<text class="iconfont iconnaozhong"></text>
							</text>
						</view>
						<view class="eatStatus">正在享用</view>
						<view class="foodInfo">
							<text>双椒牛蛙套餐等2件商品</text>
							<text class="money">￥28.99</text>
						</view>
					</view>
				</view>
				<!-- 订单信息end -->

				<!-- 我最爱吃start -->
				<!-- <view class="myLoveEat">
					<view class="myLoveEatTitle">
						<text class="title">我最爱吃</text>
						<text class="merchantCount">共16个商家></text>
					</view>

					<view class="myLoveEatRecord">
						<scroll-view scroll-x="true">

							<view class="loveEatDetail" v-for="item in list">
								<image class="image" mode="aspectFill" src="../../static/img/homepage/s2.jpg"></image>
								<view class="title">{{item}}</view>
								<view class="time">吃过10次</view>
							</view>

						</scroll-view>
					</view>

				</view> -->
				<!-- 我最爱吃end -->

				<!-- 历史订单start -->
				<view class="orderHistory">
					<view class="titleOut">
						<text class="title">历史订单</text>
					</view>

					<view  class="orderDetail" :id="'order'+index" v-for="(item,index) in list" :key="index">
						<view class="orderRecord">
							<image class="image" mode="aspectFill" src="../../static/img/homepage/s4.jpg"></image>
						</view>
						<view class="detail orderRecord">

							<view @click="orderDetail">
								<view>
									<text>{{item}}</text>
									<text class="paymentStatus">
										<text>订单已完成</text>
									</text>
								</view>
								<view class="eatStatus">3天前</view>
								<view class="foodInfo">
									<text>双椒牛蛙套餐等2件商品</text>
									<text class="money">￥28.99</text>
								</view>
							</view>

							<view>
								<button @click="comment" class="comment" type="primary">评价得积分</button>
							</view>
						</view>
					</view>

				</view>
				<!-- 历史订单end -->

				<!-- 猜你喜欢start -->
				<view class="guessYouLike">
					<view class="title">
						<text>——猜你喜欢——</text>
					</view>

					<view>
						<view class="guessDetail">

							<view class="guessDetailItem" v-for="(item,index) in list" :key="index">
								<view>
									<image mode="scaleToFill" src="../../static/img/homepage/s2.jpg"></image>
								</view>
								<view class="desc one">{{item}}</view>
								<view class="desc tow">月售998份 好评率93%</view>
								<view class="desc one">￥7</view>
								<view class="lastDesc">
									<text class="bottomTitle">宫廷香脆牛肉饼</text>
									<text class="iconfont icongengduo"></text>
								</view>
							</view>

						</view>
					</view>
				</view>
				<!-- 猜你喜欢end -->

			</view>
			<!-- 订单end -->


			<view v-show="current === 1">
				选项卡2的内容
			</view>


		</view>


	</view>
</template>

<script>
	import {
		uniSegmentedControl
	} from "@dcloudio/uni-ui";

	import '../../static/iconfont/iconfont.css';

	var list = ['肯德基', '李十八面皮', '杨国福麻辣烫', '张亮麻辣烫', '孙悟空烤肉'];

	export default {
		data() {
			return {
				list: list,
				items: ['订单', '预定'],
				current: 0
			};
		},
		onLoad() {
			console.log('create')
		},
		onReady() {
			console.log('mounted')
		},
		onPullDownRefresh() {
			console.log('下拉刷新');
			setTimeout(function() {
				uni.stopPullDownRefresh();
				console.log('关闭刷新');
			}, 1000);

		},
		onReachBottom() {
			console.log('上拉触底')
		},
		methods: {
			onClickItem(index) {
				if (this.current !== index) {
					this.current = index;
				}
			},
			//查看订单详情
			orderDetail() {
				uni.navigateTo({
					url: 'order-detail'
				});
			},
			//评价
			comment(){
				uni.navigateTo({
					url: 'order-evaluate'
				});
			}
		},
		components: {
			uniSegmentedControl
		}
	}
</script>

<style lang="less">
	@import url("order.less");
</style>
